<template>
  <v-app>
    <div class="layouts m-auto">
      <v-container class="white py-md-8 px-md-6">
        <div
          class="d-none d-sm-flex top-title text-right white--text py-2 pr-4 mb-2"
        >
          {{ $t('toEmail') }}：oceant@oceant.com
          <span
            v-if="$i18n.locale != 'en'"
            class="toggle-language pl-2 ml-2"
            @click="changeLanguage('en')"
            >ENG</span
          >
          <span
            v-if="$i18n.locale != 'zh'"
            class="toggle-language pl-2 ml-2"
            @click="changeLanguage('zh')"
            >CN</span
          >
        </div>
        <div class="nav-box d-flex align-center mb-2">
          <img src="/logo.jpg" alt="" class="d-md-none d-sm-flex logo-img" />
          <v-icon
            class="d-md-none d-sm-flex ml-auto"
            @click="showMenu = !showMenu"
            >mdi-menu</v-icon
          >
          <v-navigation-drawer v-model="showMenu" fixed right temporary>
            <v-list nav dense>
              <v-list-item
                v-for="(item, index) in navList"
                :key="index"
                :to="item.href"
                tag="a"
              >
                <v-list-item-title class="menu-title">
                  {{ item.text }}
                </v-list-item-title>
              </v-list-item>
              <v-list-item class="menu-title">
                <!-- <span
                  v-if="$i18n.locale != 'en'"
                  class="toggle-language"
                  @click="changeLanguage('en')"
                  >English</span
                >
                <span
                  v-if="$i18n.locale != 'zh'"
                  class="toggle-language"
                  @click="changeLanguage('zh')"
                  >中文</span
                > -->
              </v-list-item>
            </v-list>
          </v-navigation-drawer>

          <img :src="this.$t('imgUrl')" alt="" class="d-none d-sm-flex mr-3" />
          <!-- <div class="d-none d-sm-flex">
            <div class="nav-box-text">
              <span v-for="(item, index) in topLabel" :key="index" class="">{{
                item
              }}</span>
            </div>
          </div> -->
          <div class="d-none d-sm-flex tarbar-box justify-end">
            <nuxt-link
              v-for="(item, index) in navList"
              :key="index"
              :to="item.href"
              class=""
              :style="`font-weight:${
                $nuxt.$route.path == item.href ? 'bold' : 400
              }`"
              >{{ item.text }}</nuxt-link
            >
            <!-- <span
              v-if="$i18n.locale != 'en' && $nuxt.$route.name == 'index'"
              class="toggle-language"
              @click="changeLanguage('en')"
              >English</span
            >
            <span
              v-if="$i18n.locale != 'zh' && $nuxt.$route.name == 'index'"
              class="toggle-language"
              @click="changeLanguage('zh')"
              >中文</span
            > -->
          </div>
        </div>
        <v-main>
          <nuxt-child />
        </v-main>
      </v-container>
    </div>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      zh: true,
      topLabel: this.$t('header.topLabel'),
      navList: this.$t('header.navList'),
    }
  },
  watch: {
    '$store.state.locale'() {
      this.init()
    },
  },
  mounted() {
    localStorage.setItem('equipment', this.isMobile() ? 'phone' : 'pc')
    localStorage.setItem('lang', 'zh')
  },
  methods: {
    changeLanguage(lang) {
      localStorage.setItem('lang', lang)
      this.$store.commit('SET_LANG', lang)
      this.$i18n.locale = lang
    },
    init() {
      this.topLabel = this.$t('header.topLabel')
      this.navList = this.$t('header.navList')
    },
    isMobile() {
      const flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
  },
}
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
html {
  overflow-y: auto;
}

.v-application--wrap {
  background: #dce8ef;
}

.layouts {
  width: 72%;
  margin: 0 auto;
  padding: 30px 0;
}

.top-title {
  background: $blue198;
  font-size: 12px;
  justify-content: flex-end;
  .toggle-language {
      cursor: pointer;
      min-width: 60px;
      text-align: center;
      border-left: 1px solid #fff;
    }
}

.nav-box {
  .nav-box-text {
    color: $blue198;
    font-size: 14px;
    max-width: 300px;
    line-height: 23px;
    span {
      display: inline-block;
      margin-right: 10px;
      text-align: center;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .tarbar-box {
    flex: 1;
    font-size: 14px;
    .toggle-language {
      cursor: pointer;
      min-width: 80px;
      text-align: center;
      border-left: 1px solid #fff;
    }
    a {
      white-space: nowrap;
      display: inline-block;
      min-width: 100px;
      text-align: center;
      color: #333;
      text-decoration: none;
      border-right: 1px solid $blue198;
      &:first-child {
        padding-left: 0 !important;
      }
      &:last-child {
        padding-right: 0 !important;
        border-right: 0;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .v-application--wrap {
    background: #fff;
  }

  .layouts {
    width: 100%;
    padding: 0 !important;
  }
  .nav-box {
    margin-bottom: 0;

    .logo-img {
      width: 30%;
    }
  }
  .menu-title {
    font-size: 0.32rem !important;
  }
}
</style>
